const path = require('path');
const fs = require('fs');
const Handlebars = require('handlebars');

const renderWebLayout = (ele) => {
  const data = {
    template: [
      { pic: 'https://z3.ax1x.com/2021/06/01/2uBluj.png', name: 'list' },
      { pic: 'https://z3.ax1x.com/2021/06/01/2uB93D.png', name: 'form' },
      { pic: 'https://z3.ax1x.com/2021/06/01/2uBgPK.png', name: 'detail' },
      { pic: 'https://z3.ax1x.com/2021/06/01/2uDSZn.png', name: 'tab' },
      { pic: 'https://z3.ax1x.com/2021/05/21/gHIc24.png', name: 'step' },
    ],
  };
  data.preview = data.template[0].pic;
  const hbsFile = fs.readFileSync(
    path.join(global.appRoot, './web/layout.hbs'),
    {
      encoding: 'utf-8',
    }
  );
  const html = Handlebars.compile(hbsFile)(data);

  // const LinkStr = fs.readFileSync('./style.css', { encoding: 'utf-8' });
  const eventStr = `
  const isComponentNameValid = (str) => {
    if(!str&&!str.length) return false;
    const reg = /^[^\\u4e00-\\u9fa5]+$/;
    const a=str[0]
    return a >= 'A' && a <= 'Z' && reg.test(a);
  };

  const byid=(id)=>document.getElementById(id);
    function openModal(templateName){
      window.isOpen=true;
      byid('tmpl').innerHTML=templateName;
      byid('modal-input').value='My'+templateName+(Math.random()*100).toFixed(0)
      const modal=byid('page-modal');
      modal.style.display='flex';
      const wrapper=document.getElementById('previewWrapper')
      wrapper.style.display='none';
      // byid('previewWrapper').style.display='none';
    };
    function onClose(){
      window.isOpen=false;
      byid('page-modal').style.display='none';
    };
    function inputchange(e){
      // const input=document.getElementById('modal-input')
      // input.value=e.target.value
    };function selectTemplate(tmpl,comp){
    fetch('http://127.0.0.1:63221/getTemplate?t='+tmpl+'&c='+comp)
    .then(a=>a.json())
    .then(json=>{
      console.log('json',json)
      const {status,p,template}=json
      if(status){
        alert(template+'创建成功!路径:'+p)
        byid('page-modal').style.display='none';
        window.isOpen=false;
      }else{
        alert('创建失败')
      }
    })
    console.log(name)
  };function zoomIn(imgUrl){
    if(!window.isOpen){
      document.getElementById('previewWrapper').style.display='block'
      document.getElementById('previewImg').src=imgUrl
    }
  };
  function onConfirm(){
    const reg = /\\u005cs/g;
    const compName=byid('modal-input').value.replace(reg,'');
    console.log(reg)
    console.log('11111'+compName)
    if(!isComponentNameValid(compName)){
      alert('输入不合法：组件名首字母大写且不得包含中文')
      byid('modal-input').value=''
    }else{
      const templ=byid('tmpl').innerHTML
      console.log(compName,templ)
      selectTemplate(templ,compName)
    }
    
  };
  function clearPreviewImage(){
    document.getElementById('previewWrapper').style.display='none'
  };
  function goNewPage(){
    window.open('http://127.0.0.1:63221/newTemplate')
  }
  function toggle(){
    const el=document.getElementById('YHPAGE_INNER')
    const toggle=document.getElementById('toggleBar')
    const width=el.offsetWidth
    console.log(width)
    if(width>0){
      el.style.width=0+'px';
      toggle.innerHTML='<'
    }else{
      el.style.width=150+'px';
      toggle.innerHTML='>'
    }
  }
  `;

  const scriptsStr = `(() => {
    const html=\`${html}\`;
    const el=document.getElementById('${ele}')
    console.log(el)
    // el.innerHTML = '<p><a>11</a></p>';
    document.getElementById('${ele}').innerHTML = html;

    const newScript=document.createElement('script');
    newScript.type='text/javascript';
    newScript.innerHTML=\`${eventStr}\`
    document.getElementById('${ele}').appendChild(newScript)
  })()`;

  return scriptsStr;
};

module.exports = renderWebLayout;
